{% extends 'service-details.html' %}

{% block Graph %}
<canvas id="pieChart" style="max-height: 400px;"></canvas>
    <script>
    document.addEventListener("DOMContentLoaded", () => {
      const labels = [{% for label in labels %}'{{ label }}'{% if not loop.last %}, {% endif %}{% endfor %}];
      const data = [{% for datum in data %}{{ datum }}{% if not loop.last %}, {% endif %}{% endfor %}];
      const backgroundColor = [{% for color in colors %}'{{color}}'{% if not loop.last %}, {% endif %}{% endfor %}];

      new Chart(document.querySelector('#pieChart'), {
        type: 'pie',
        data: {
          labels: labels,
          datasets: [{
            label: '占比',
            data: data,
            backgroundColor: backgroundColor,
            hoverOffset: 4
          }]
        }
      });
    });
   </script>
{% endblock %}